import { IInputOptions } from '../typing';
import Component from './Component';
import List from './List';

class Input extends Component {
  private options: IInputOptions

  constructor(options: IInputOptions) {
    super();
    this.options = options;
  }

  public render() {
    const { placeholder, buttonText } = this.options;

    this.options.wrapperEl.innerHTML += Component.inputView(
      placeholder, buttonText
    );
  }

  public bindEvent() {
    const oAddBtn: HTMLElement = document.querySelector('.add-btn');
    const oInput: HTMLElement = document.querySelector('.todo-input');

    oAddBtn.addEventListener('click', this.handleBtnClick.bind(this, oInput), false);
  }

  private handleBtnClick(inputDom) {
    const val: string = inputDom.value.trim();

    if (val.length) {
      List.addItem(val);
      inputDom.value = '';
    }
  }
}

export default Input;